<script setup>
import Footer from "../components/Footer.vue";
import router from "@/router";
import {cancelOrdersService, reportlistService} from "@/api/hospital";
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import server from "@/utils/axiosUtils.js";

const payForm = ref('');
const pay = (orderId) => {
  console.log(orderId)
  server({
    url: "/pay/alipay",
    method: "get",
    params: {
      orderId: orderId,
    }
  }).then(res => {
    payForm.value.innerHTML = res;
    console.log(payForm.value);
    window.document.forms[0].submit()
  });
}


//已完成-》未归档/已归档
const data1 = ref([])
//未完成-》已下单/已支付
const data2 = ref([])
//已失效-》已取消/已过期/已退款
const data3 = ref([])

onMounted(async () => {
  await getRecords();
});


const tabsData = ref([
  {
    name: '已完成',
    type: 0,
  },
  {
    name: '待完成',
    type: 1,

  },
  {
    name: '已失效',
    type: 2,
  }

])

const queryParams = ref({
  tabType: 0
})
const handleTabClick = (tab) => {
  queryParams.tabType = tab.index;
};

const toAppointmentcancel = (data) => {
  ElMessageBox.confirm('确定取消预约吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    console.log(data)
    let result = await cancelOrdersService(data)
    //   console.log("result",result)
    if (result.code === 200) {
      ElMessage.success('取消成功');
      router.push("/appointmentcancel");
    } else {
      ElMessage.error(result.message);
    }

  })

};


const getRecords = async () => {
  let result = await reportlistService();
  // console.log(result);
  data1.value = result.data.filter((item) => {
    return item.state === 3 || item.state === 4;
  });
  data2.value = result.data.filter((item) => {
    return item.state === 1 || item.state === 2;
  });
  data3.value = result.data.filter((item) => {
    return item.state === 0 || item.state === 5 || item.state === 6;
  });
  console.log(data3.value)

};

</script>

<template>
  <!--支付页面入口-->
  <div ref="payForm"></div>
  <!-- 总容器 -->
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
      <p>我的预约</p>
      <div></div>
    </header>
    <div class="top-ban"></div>
    <el-tabs v-model="queryParams.tabType" @tab-click="handleTabClick" style="margin-left: 15px">
      <el-tab-pane
          v-for="item in tabsData"
          :key="item.type"
          :label="item.name "
          :name="item.type"
      />
    </el-tabs>


    <!--        <img src="@/assets/img/loading.gif" v-if ="data1.length === 0"/>-->
    <ul v-show="queryParams.tabType === 0" v-loading="data1.length === 0">
      <li v-for="(item, index) in data1" :key="index">
        <div class="left">
          <p>{{ item.orderdate }}</p>
          <p>{{ item.setmeal.name }}</p>
        </div>
        <div class="right" v-if="item.state === 1 || item.state === 2" @click="toAppointmentcancel(item)">
          取消预约
        </div>

        <div class="right" v-if="item.state === 3">
          报告生成中
        </div>

        <div class="right" v-if="item.state === 4" @click="router.push({
                    path: '/report',
                    query:{
                        orderId:item.orderid
                    }
                })">
          查看报告
        </div>
        <div class="right" v-if="item.state === 0" disable style="color:burlywood">
          已取消
        </div>
        <div class="right" v-if="item.state === 5" disable style="color:burlywood">
          已过期
        </div>
        <div class="right" v-if="item.state === 6" disable style="color:cadetblue">
          已退款
        </div>
      </li>

    </ul>
    <ul v-show="queryParams.tabType === 1">
      <li v-for="(item, index) in data2" :key="index">
        <div class="left">
          <p>{{ item.orderdate }}</p>
          <p>{{ item.setmeal.name }}</p>
        </div>
        <div class="right" style="display: flex;flex-direction: row;">
          <div v-if="item.state === 1 "
               @click="pay(item.orderid)"
               style="margin-right: 2vh;color: #5eac76;">
            去支付
          </div>
          <div
              v-if="item.state === 1 || item.state === 2"
              @click="toAppointmentcancel(item)">
            取消预约
          </div>
        </div>


        <div class="right" v-if="item.state === 3">
          报告生成中
        </div>

        <div class="right" v-if="item.state === 4" @click="router.push({
                    path: '/report',
                    query:{
                        orderId:item.orderid
                    }
                })">
          查看报告
        </div>

        <div class="right" v-if="item.state === 0" disable style="color:burlywood">
          已取消
        </div>
        <div class="right" v-if="item.state === 5" disable style="color:burlywood">
          已过期
        </div>

        <div class="right" v-if="item.state === 6" disable style="color:cadetblue">
          已退款
        </div>
      </li>

    </ul>
    <ul v-show="queryParams.tabType === 2">
      <li v-for="(item, index) in data3" :key="index">
        <div class="left">
          <p>{{ item.orderdate }}</p>
          <p>{{ item.setmeal.name }}</p>
        </div>
        <div class="right" v-if="item.state === 1 || item.state === 2" @click="toAppointmentcancel(item)">
          取消预约
        </div>

        <div class="right" v-if="item.state === 3">
          报告生成中
        </div>

        <div class="right" v-if="item.state === 4">
          查看报告
        </div>

        <div class="right" v-if="item.state === 0" disable style="color:burlywood">
          已取消
        </div>
        <div class="right" v-if="item.state === 5" disable style="color:burlywood">
          已过期
        </div>

        <div class="right" v-if="item.state === 6" disable style="color:cadetblue">
          已退款
        </div>
      </li>

    </ul>

    <div class="bottom-ban"></div>
    <Footer>

    </Footer>
  </div>

</template>

<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
}

/*********************** header ***********************/
header {
  width: 100%;
  height: 15.7vw;
  background-color: #FFF;

  position: fixed;
  left: 0;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
  padding: 0 3.6vw;
}

header .fa {
  font-size: 8vw;
}

/*********************** footer ***********************/
footer {
  width: 100%;
  height: 14.2vw;
  box-sizing: border-box;
  border-top: solid 1px #E9E9E9;
  background-color: #FFF;

  position: fixed;
  left: 0;
  bottom: 0;
}

footer ul {
  width: 100%;
  height: 14.2vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

footer ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-size: 3vw;
  color: #999;

  user-select: none;
  cursor: pointer;
}

footer ul li .fa {
  font-size: 5vw;
}

/*********************** common样式 ***********************/
.top-ban {
  width: 100%;
  height: 15.7vw;
}

.bottom-ban {
  width: 100%;
  height: 14.2vw;
}

/*********************** ul ***********************/
ul {
  width: 86vw;
  margin: 0 auto;
}

ul li {
  width: 100%;
  height: 14vw;
  border-bottom: solid 1px #EEE;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul li .left {
  user-select: none;
  cursor: pointer;
}

ul li .left p:first-child {
  color: #555;
  font-size: 3.3vw;
}

ul li .left p:last-child {
  color: #333;
  font-size: 4.2vw;
  font-weight: 600;
}

ul li .right {
  font-size: 4vw;
  color: #E6A23C;
}


ul li .right2 {
  font-size: 4vw;
  color: #5eac76;
}

.flex-tags .el-tag {
  margin-right: 8px; /* 或者你想要的任何值 */
}
</style>
